<template>
	<view>
		<u-navbar title="个人中心" title-color="#FFF" :background="navBackground" :is-fixed="true" :border-bottom="false" :is-back="false"></u-navbar>
		<view class="user-box z-relative">
			<image src="/static/img/img/img_01.png" class="d-block w-100 h-100"></image>
			<view class="inner z-absolute w-100 h-100 d-flex-center flex-column">
				<u-avatar :src="userInfo.avatarUrl" size="120"></u-avatar>
				<text class="nickname" v-if="userInfo">{{ userInfo.nickName }}</text>
				<view class="synchronize-btn d-flex radius-10" v-if="userInfo" @click="updateUserInfo">
					<image src="/static/img/img/icon_01.png" mode="widthFix" class="icon"></image>
					<text>同步微信信息</text>
				</view>
				<view class="synchronize-btn d-flex radius-10" v-else @click="$tools.goPage('/pages/login/login')"><text>登录</text></view>
			</view>
			<u-icon name="setting" color="#FFF" size="42" class="set-icon z-absolute" @click="$tools.goPage(userInfo?'set':'/pages/login/login')"></u-icon>
		</view>
		<view class="bottom">
			<button open-type="share" class="row d-flex-jsb">
				<view class="d-flex">
					<u-icon slot="icon" size="34" name="share"></u-icon>
					<text class="title">分享应用</text>
				</view>
				<u-icon name="arrow-right" class="arrow" color="#969799"></u-icon>
			</button>
			<button open-type="feedback" class="row d-flex-jsb">
				<view class="d-flex">
					<u-icon slot="icon" size="34" name="kefu-ermai"></u-icon>
					<text class="title">意见反馈</text>
				</view>
				<u-icon name="arrow-right" class="arrow" color="#969799"></u-icon>
			</button>
			<button open-type="contact" class="row d-flex-jsb">
				<view class="d-flex">
					<u-icon slot="icon" size="34" name="kefu-ermai"></u-icon>
					<text class="title">在线客服</text>
				</view>
				<u-icon name="arrow-right" class="arrow" color="#969799"></u-icon>
			</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navBackground: this.$navBackground,
			userInfo: ''
		};
	},
	onShow() {
		this.checkLogin();
	},
	methods: {
		// 检测是否已登录
		checkLogin() {
			let token = uni.getStorageSync('token');
			if (token) {
				this.userInfo = uni.getStorageSync('userInfo');
			}
		},
		// 同步微信信息
		updateUserInfo() {
			uni.getUserProfile({
				desc: '用户信息，拿来吧你！',
				lang: 'zh_CN',
				success: res => {
					let data = res.userInfo;
					this.$cloudApi.call({
						name: 'updateuserinfo',
						data: {
							userInfo: res.userInfo
						},
						success: res => {
							this.userInfo = res.userInfo;
							uni.setStorageSync('userInfo', res.userInfo);
						}
					});
				},
				fail: err => {
					console.log(err);
					this.$tools.showToast('嗯？没拿到用户信息...');
				}
			});
		}
	}
};
</script>

<style lang="scss">
.user-box {
	height: 420rpx;
	background: #999;
	.inner {
		top: 0;
		left: 0;
		z-index: 2;
		.nickname {
			font-size: 28rpx;
			line-height: 40rpx;
			color: #ffffff;
			font-weight: bold;
		}
		.synchronize-btn {
			padding: 6rpx 10rpx;
			background: $tian-color-fruitgreen;
			margin-top: 10rpx;
			.icon {
				width: 30rpx;
				margin-right: 4rpx;
			}
			text {
				font-size: 24rpx;
				line-height: 40rpx;
				color: #ffffff;
			}
		}
	}
	.set-icon {
		z-index: 3;
		top: 30rpx;
		right: 32rpx;
	}
}
.row {
	width: 100%;
	padding: 26rpx 32rpx;
	font-size: 28rpx;
	line-height: 54rpx;
	color: $u-content-color !important;
	background-color: #fff;
	text-align: left;
	border-bottom: 1px solid rgba(228, 231, 237, 0.5);
	&::after {
		display: none;
	}
	.title {
		font-size: 28rpx;
		margin-left: 10rpx;
	}
}
</style>
